﻿@{
    ViewData["Title"] = "GriddingMap";
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 1300px;
            height: 600px;
            border: 1px solid #999;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=KoiPfT9zHka3xdr0LvsflfCm5nMBCYaY"></script>
</head>

<body>
    <div id="container"></div>
   <script>


        //1.创建地图实例
        var map = new BMap.Map("container");

        //2.设置中心点坐标  BMap命名空间下的Point类来创建一个坐标点
        var point = new BMap.Point(116.404, 39.915);

        //3.地图初始化，同时设置地图展示级别  (3-19)
        map.centerAndZoom(point, 15);

        //4.鼠标滚轮  开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        //5.添加控件
        //平移缩放控件 NavigationControl   PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能
        map.addControl(new BMap.NavigationControl());


        //比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系
        map.addControl(new BMap.ScaleControl());

        //缩略地图 OverviewMapControl	默认位于地图右下方，是一个可折叠的缩略地图
        map.addControl(new BMap.OverviewMapControl());

        //地图类型	MapTypeControl	默认位于地图右上方
        map.addControl(new BMap.MapTypeControl());
        var opts = {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            type: BMAP_NAVIGATION_CONTROL_SMALL //类型
        }
        map.addControl(new BMap.NavigationControl(opts));
   </script>
     

</body>

</html>
